<template>
  <el-card shadow="never">
    <el-tooltip class="item" effect="dark" content="新增门禁设备" placement="top">
      <el-button
        class="mb20"
        type="primary"
        size="small"
        @click="handleEdit(false, {})"
        v-if="$auth('assets:add')"
        icon="el-icon-plus"
      />
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="新增天线设备" placement="top">
      <el-button
        type="primary"
        class="fr mb20"
        size="small"
        @click="handleRightEdit(false, {})"
        v-if="$auth('assets:add')"
        icon="el-icon-plus"
      />
    </el-tooltip>
    <el-row :gutter="20">
      <el-col :span="12">
        <left-table @rightFresh="handleRightFresh" @edit="handleEdit" ref="leftTable" />
      </el-col>
      <el-col :span="12">
        <right-table @edit="handleRightEdit" ref="rightTable" />
      </el-col>
    </el-row>
    <access-modal @refresh="handleRefresh" ref="accessModal" />
    <right-modal @refresh="handleRightFreshNew" ref="rightModal" />
  </el-card>
</template>

<script>
import LeftTable from './LeftTable'
import RightTable from './RightTable'
import AccessModal from './AccessModal'
import RightModal from './Modal'
export default {
  components: {
    LeftTable,
    RightTable,
    AccessModal,
    RightModal
  },
  data() {
    return {
      rightRow: {}
    }
  },
  methods: {
    handleEdit(bool, row) {
      this.$refs.accessModal.edit(bool, row)
    },
    handleRightEdit(bool, row) {
      this.rightRow = Object.assign(this.rightRow, row)
      this.$refs.rightModal.edit(bool, this.rightRow)
    },
    handleRefresh() {
      this.$refs.leftTable.handleGetList()
    },
    handleRightFreshNew() {
      this.$refs.rightTable.refresh()
    },
    handleRightFresh(row) {
      this.rightRow = Object.assign({}, row)
      this.$refs.rightTable.edit(row)
    }
  }
}
</script>
